import { Alert, AutoComplete, Button, Statistic, Tag } from 'antd';
import React, {
  useState,
  useRef
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type {
  ProColumns,
  ActionType
} from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import ProCard from '@ant-design/pro-card';
import { queryRule, userPlayExport} from './service';
import { Link } from "react-router-dom"
import moment from 'moment';
import { downloadFile } from '@/utils/utils';
import { baseUrl } from '@/utils/httpUrl';
const TableList: React.FC<{}> = (props: any) => {
  const { uid } = props.location.query
  const actionRef = useRef<ActionType>();
  const [userName, setUserName] = useState()
  const whoFirstMap = {
    '1': '执黑',
    '2': '执白'
  }
  const resultMap = {
    '1': '黑胜',
    '2': '白胜',
    '3': '平局'
  }
  const failureTypeMap = {
    '1': '认输',
    '2': '退出对弈',
    '3':'超时判负'
  }
  const columns: ProColumns<{}>[] = [

    {
      title: '对局id',
      dataIndex: 'gameId',
      hideInSearch: true,
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInSearch: true,
      render: (startTime,record) => (<>{ record.startTime ? moment(startTime*1000).format('YYYY-MM-DD HH:mm:ss'):'-'}</>)
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      hideInSearch: true,
      render: (endTime,record) => (<>{ record.endTime ? moment(endTime*1000).format('YYYY-MM-DD HH:mm:ss'):'-'}</>)
    },
    {
      title: '用时',
      dataIndex: 'duration',
      hideInSearch: true
    },
    {
      title: '棋士品级',
      dataIndex: 'playGradeName',
      hideInSearch: true
    },
    {
      title: '当前积分',
      dataIndex: 'currentScore',
      hideInSearch: true,
    },
    {
      title: '获得分数',
      dataIndex: 'playScore',
      hideInSearch: true,
    },
    {
      title: '手数',
      dataIndex: 'steps',
      hideInSearch: true,
    },
    {
      title: '执黑执白',
      dataIndex: 'whoFirst',
      hideInSearch: true,
      render: (whoFirst) => (<>{ whoFirstMap[whoFirst]}</>)
    },
    {
      title: '对弈结果',
      dataIndex: 'result',
      hideInSearch: true,
      render: (result) => (<>{ resultMap[result]}</>)
    },
    {
      title: '对弈备注',
      dataIndex: 'failureType',
      hideInSearch: true,
      render: (failureType) => (<>{ failureTypeMap[failureType]}</>)
    },
    {
      title: '查看报告',
      hideInSearch: true,
      dataIndex: 'option',
      render: (_: any, record: any) => (
        <a target="_blank" href={`/gogame/?scene=gameHistory&gameId=${record.gameId}&isTeacher=1`} rel="noreferrer">查看棋谱</a>
      )
    },
  ];
  const userPlayExportHandler = async function () {
    const url = await userPlayExport({uid:String(uid)})
    downloadFile(`活动学员对弈详情-${moment(new Date().getTime()).format('YYYY-MM-DD HH-mm-ss')}`,url,'.xls')
  }

  return (
    <PageContainer>

      <ProTable<{}>
        headerTitle="数据列表"
        actionRef={actionRef}
        rowKey="key"
        request={async params => {
          const msg = await queryRule({
            uid,
            ...params,
            pageNum: params.current
          })
          setUserName(msg.data.nickname)

          return {
            data: msg.data.games,
            success: true,
            total: msg.data.count
          }
        }}
        search={ false}

        columns={columns}
      toolBarRender={
          (data: any) => (
            [
              <Alert message={`用户昵称 : ${userName}`} type="info" />,
              <Button key="primary" type="primary" onClick={userPlayExportHandler}>
                导出活动学员对弈详情
              </Button>
            ]
          )
        }

      />
    </PageContainer>
  );
};

export default TableList;
